<template>
    <el-form :inline="true" :model="formData" label-width="50">
      <el-form-item label="媒体:" prop="mediaId">
        <el-select @change="e => handleOptionChange(e, 'mediaId')" v-model="formData.mediaId" style="width: 120px" placeholder="请选择媒体" clearable>
          <el-option v-for="item in formList.mediaList" :key="item.id" :value="item.id" :label="item.mediaName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="书城:" prop="platformId">
        <el-select @change="e => handleOptionChange(e, 'platformId')" v-model="formData.platformId" style="width: 120px" placeholder="请选择书城" clearable>
          <el-option v-for="item in formList.platformList" :key="item.id" :value="item.id" :label="item.platformName"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, onMounted, nextTick } from "vue";
import { MediaList, PlatformList } from '@/apis/media'
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})
const formList = reactive({
  mediaList: [],
  platformList: []
})
const formData = reactive({
  mediaId: +props.params.mediaId || '',
  platformId: +props.params.platformId || ''
});

onMounted(() => {
  Promise.all([getMediaList(), getPlatformList()]).then(() => {
    handleOptionChange()
  })
  
})
const getMediaList = () => {
  return MediaList().then(res => {
    formList.mediaList = res
    if (res && res.length) {
        formData.mediaId = +props.params.mediaId || res[0].id
    }
  })
}
const getPlatformList = () => {
  return PlatformList().then(res => {
    formList.platformList = res
    if (res && res.length) {
        formData.platformId = +props.params.platformId || res[0].id
    }
  })
}
const emits = defineEmits(['change'])
const handleOptionChange = () => {
  nextTick(() => emits('change', formData))
}
</script>